<template>
	<view class="mask">
		<u-popup v-model="regBool"  mode="center" :mask-close-able="false">
			<view class="mwrap">
				<image class="mimg" mode="widthFix" src="/static/unfull.png"></image>
				<view class="ok_btn" @click="regBtn"></view>	
			</view>
		</u-popup>
		<u-popup v-model="infoBool"  mode="center" :mask-close-able="false">
			<view class="mwrap mwrap2">
				<image class="mimg" mode="widthFix" src="/static/unfull2.png"></image>
				<view class="headimg">
					<image class="himg full" mode="aspectFill" :src="avatarUrl||'/static/uico.png'"></image>
					<button class="full hbtn" open-type="chooseAvatar" type="primary" @chooseavatar="onChooseAvatar"></button>
				</view>
				<u-field type="nickname" class="nickname" v-model="nickname" placeholder="请输入昵称"/>
				<view class="cancel_btn" @click="cancelBtn"></view>
				<view class="info_btn" @click="confirmBtn"></view>	
			</view>
		</u-popup>
	</view>
</template>
<script>
	import platform from "@/src/platform";
	import http from "@/src/http";
	import user from "@/src/data/user";
	export default {
		name:"NickHead",
		options: { styleIsolation: 'shared' },
		data() {
			return {
				nickname:'',
				avatarUrl:'',
				regBool:true,//
				infoBool:false,//
			};
		},
		onLoad() {
			
		},
		methods:{
			regBtn(){
				this.regBool = false;
				this.infoBool = true;
			},
			cancelBtn(){
				this.regBool = true;
				this.infoBool = false;
			},
			async confirmBtn(){
				if(!this.avatarUrl){
					return this.$u.toast('请选择头像');
				}
				if(!this.nickname){
					return this.$u.toast('请输入昵称')
				}
				let isNormal = this.includeNormal(this.nickname);
				if(!isNormal){
					return this.$u.toast('昵称至少包含中英文或数字');
				}
				if(this.nickname.length>10){
					return this.$u.toast('昵称过长')
				}
				uni.showLoading({
					title:'上传中'
				});
				let avatar = await platform.uploadFile(this.avatarUrl);
				http.saveInfo({
					nickname:this.nickname,
					avatar:avatar
				}).then(res=>{
					uni.hideLoading();
					this.$emit('success');
					if(res.data.user){
						user.merge(res.data.user);
					}
					uni.showToast({
						title:res.message
					})
				})
			},
			onChooseAvatar(res){
				if(res&&res.target&&res.target.avatarUrl){
					this.avatarUrl = res.target.avatarUrl;
				}
			},
			includeNormal(string){
				// 中文字符的正则表达式
				const chineseRegex = /[\u4e00-\u9fa5]/;
				// 英文字符的正则表达式
				const englishRegex = /[a-zA-Z]/;
				// 数字的正则表达式
				const numberRegex = /[0-9]/;
				return chineseRegex.test(string) || englishRegex.test(string) || numberRegex.test(string)
			}
		}
	}
</script>

<style lang="scss" scoped>
.full{
	position: absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
}	
.mask{
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index: 9;
	/deep/ .u-mode-center-box{
		background-color: transparent;
	}
}
.mwrap{
	width: 488rpx;
	left:17%;
	&.mwrap2{
		width: 604rpx;
		left:10%;
	}
	.mimg{
		position: relative;
		width:100%;
	}
	.ok_btn{
		position: absolute;
		width:40%;
		left:30%;
		bottom:0;
		height: 25%;
	}
	.cancel_btn{
		position: absolute;
		width:50%;
		left:0%;
		bottom:0;
		height: 16%;
	}
	.info_btn{
		position: absolute;
		width:50%;
		right:0%;
		bottom:0;
		height: 16%;
	}
	.nickname{
		position: absolute;
		width:75%;
		bottom:24%;
		color:#000;
		font-weight: 400;
		left:20%;
		text-align: center;
		/deep/ .u-field__input-wrap{
			font-size:35rpx;
			
		}
	}
	.headimg{
		position: absolute;
		width:86rpx;
		height:86rpx;
		
		left:70%;
		top:43%;
		.hbtn{
			z-index: 2;
			opacity: 0;
		}
		.himg{
			border-radius: 50%;
		}
	}
}

</style>